<template>
	<div class="">
  <naviHeader></naviHeader>
  
  <div class="notes">
    您还不是会员哦~
  </div>

  <div class="column-item">
    <div class="title-container">
      <div>
        <div class="title">VIP会员</div>
        <div class="description">您将享受如下特权</div>
      </div>
    </div>
    <div class="content">
      <div>送500元VIP专享课程，购买专栏打八折</div>
      <div>邀请朋友注册VIP会员可获得高达35%+15%的奖学金</div>
      <div>旗下会员购买课程可获得高达30%+15%的奖学金</div>
    </div>
  </div>
    <div class="list-container">
      <div class="item" v-for="(item, index) in list" :key="item.index" v-on:click="upgrade(index)">
        <div>{{item.number}}个月</div>
        <div class="price">{{item.price}}</div>
      </div>
    </div>
	</div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import { getVipInfo, upgrade2Vip } from "../../service/getData";

export default {
  data() {
    return {
      list: [],
    };
  },

  mounted() {
    this.init();
  },
  components: {
    naviHeader
  },
  methods: {
    init: function() {
      getVipInfo(this.$store.userToken).then(res => {
        this.list = res;
      });
    },
    upgrade: function(index) {
      var item = this.list[index];

      upgrade2Vip(this.$store.userToken, item.id, item.price, this.$store.userInfo.score).then((res) => {
        console.log('购买成功');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.notes {
  @include sc(0.32rem, #000);
  @include fj(center);
  background: #fff;
  height: 2rem;
  line-height: 2rem;
}

.column-item {
  @include sc(0.32rem, #000);
  margin-top: 0.2rem;
  background: #fff;
  .title-container {
    @include fj(center);
    align-items: center;
    height: 1.6rem;
    text-align: center;
    border-bottom: 2px solid #f1f1f1;

    .title {
      @include sc(0.34rem, red);
    }

    .description {
      @include sc(0.26rem, red);
    }
  }

  .content {
    line-height: 0.6rem;
    padding: 0.5rem;
  }
}

.list-container{
  @include fj(space-around);
  align-items: center;
  flex-wrap: wrap;

  .item{
    border-radius: 10px;
    padding: 0.1rem;
    width: 3rem;
    background: #16e08f;
    text-align: center;
    margin: 0.1rem;

      
    .price {
      color: #049009;
      margin: 0rem 0.1rem;
      font-size: 0.35rem;
    }

    .price::before {
      content: "￥";
      font-size: 0.28rem;
    }

  }

  .item>div{
    @include sc(0.28rem, #fff);

  }
}

.btn-container {
  @include fj(space-around);

  .btn {
    @include sc(0.32rem, #fff);
    margin: 0.5rem 0;

    text-align: center;
    width: 3rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #16e08f;

    border-radius: 10px;
  }
}
</style>
